<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>菜单列表</title>
	<link href="${basePath }/static/plugins/layui/css/layui.css" rel="stylesheet"/>
	<link href="${basePath}/static/build/css/app.css" rel="stylesheet" media="all">
	<link href="${basePath }/static/plugins/ztree/css/metroStyle/metroStyle.css" rel="stylesheet">
	<style>
		#toolbar{
			margin: 12px 0 0 0;
		}
		#menuModal{
			display: block;
			padding: 4px 0 16px 0;
		}
		#auth-load{
			font-size: 23px;
			position: relative;
			top: 4px;
			left: 4px;
		}
		.dcms-icons-container{
			padding: 12px;
		}
		.dcms-icons-container .dcms-box{
			border: 1px solid #ddd;
			border-radius: 2px;
			display: inline-block;
			margin: 2px;
			width: 60px;
			line-height: 42px;
			text-align: center;
			cursor: pointer;
			vertical-align: top;
			height: 40px;
			transition: all .3s;
		}
		.dcms-icons-container .dcms-box i {
			font-size: 22px;
		}
		.dcms-icons-container .dcms-box:hover{
			background: #eaeaea;
		}
		.dcms-input-icon{
			border: 1px solid #ccc;
			border-radius: 4px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			display: block;
			width: 60px;
			height: 100%;
			float: left;
			text-align: center;
			cursor: pointer;
			background: #fff;
			transition: all .3s;
		}
		.dcms-input-icon:hover{
			background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
		}
		.dcms-input-icon i{
			line-height: 38px;
			font-size: 18px;

		}
	</style>
</head>
<body>
<div class="" id="menu-main" style="margin: 12px;">
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md2 layui-anim layui-anim-up">
				<div class="layui-row">
					<div class="layui-col-xs8">
						<div class="layui-btn-group " id="toolbar">
							<button title="删除" class="layui-btn layui-btn-primary layui-btn-xs layui-btn-disabled" data-type="delete"><i class="layui-icon">&#xe640;</i></button>
							<button title="刷新" class="layui-btn layui-btn-primary layui-btn-xs" data-type="refresh"><i class="layui-icon">&#x1002;</i></button>
							<button title="新增" class="layui-btn layui-btn-primary layui-btn-xs" data-type="toInsert"><i class="layui-icon">&#xe61f;</i></button>
						</div>
					</div>
				</div>
				<div class="layui-row" id="menuModal">
					<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop" id="auth-load">&#xe63e;</i>
					<ul id="authtree" class="ztree"></ul>
				</div>
			</div>
			<div class="layui-col-md10 layui-anim layui-anim-up">
				<form id="form" class="layui-form" action="javascript:;" style="margin: 24px 48px 0 0;">
					<input type="hidden" id="menuId" name="menuId">
					<div class="layui-form-item">
						<label class="layui-form-label">名称</label>
						<div class="layui-input-block">
							<input type="text" name="title" placeholder="请输入名称" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">请求地址</label>
						<div class="layui-input-block">
							<input type="text" name="url" placeholder="请输入请求地址" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">是否父节点</label>
						<div class="layui-input-block">
							<input type="checkbox" lay-filter="level" lay-skin="switch" checked lay-text="是|否">
							<input value="1" name="level" type="hidden">
						</div>
					</div>
					<div class="layui-form-item" id="pidInput" style="display: none;">
						<label class="layui-form-label">选择父节点</label>
						<div class="layui-input-block">
							<input value="0" name="pid" type="hidden">
							<select name="pidSelect" id="pidSelect" lay-filter="pidSelect">

							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">图标</label>
						<div class="layui-input-block">
							<span class="dcms-input-icon">
								<i class="layui-icon">&#xe617;</i>
							</span>
							<input type="hidden" name="icon" value="&#xe617;">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">排序</label>
						<div class="layui-input-inline">
							<input type="number" name="orders" placeholder="请输入序号" value="1" class="layui-input">
						</div>
						<div class="layui-form-mid layui-word-aux">导航栏采用升序排列</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit lay-filter="form">新增</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<div id="iconModal" style="display: none;">
	<div class="dcms-icons-container">

	</div>
</div>


<script src="${basePath }/static/plugins/layui/layui.js"></script>
<script src="${basePath }/static/plugins/jq/jquery-2.2.4.min.js"></script>
<script src="${basePath }/static/plugins/ztree/js/jquery.ztree.all.js"></script>
<script src="${basePath }/static/build/js/common.js"></script>
<script>
    layui.use(['form', 'table', 'layer', 'element', 'search'], function() {
        var form = layui.form,
            table = layui.table,
            layer = layui.layer,
            search = layui.search,
			checkedNode = {},
			type = 'insert';

		//初始化ztree
		function initZtree() {
            $.ajax({
                url: '${basePath}/power/menu/getMenuTree',
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    $('#auth-load').remove();
                    $('#toolbar button[data-type="deleteBatch"]').addClass('layui-btn-disabled')
                    var setting = {
                        callback: {
                            onClick: zTreeOnClick
                        }
                    };
                    $.fn.zTree.init($("#authtree"), setting, res);
                    //action.resetForm();
                }
            });
        }
        initZtree();
        //监听ztree点击
        function zTreeOnClick(event, treeId, treeNode) {
            console.log(treeNode);
            console.log(event);
            //禁用多选 .curSelectedNode
            $('a').removeClass('curSelectedNode');
            console.log($(event.target));
            $(event.target).parent().addClass('curSelectedNode');
			//允许删除
            checkedNode = treeNode;
            $('#toolbar button[data-type="delete"]').removeClass('layui-btn-disabled');
            //显示菜单详情
            $.ajax({
                url: '${basePath}/power/menu/detail',
                type: 'post',
                dataType: 'json',
                data: {
                    menuId: treeNode.id
				},
                success: function (res) {
                    var obj = res.object;
                    type = 'update';
                    $('#menuId').val(treeNode.id);
                    $('input[name="title"]').val(obj.title);
                    $('input[name="url"]').val(obj.url);
                    $('input[name="orders"]').val(obj.orders);
                    $('input[name="pid"]').val(obj.pid);
                    $('input[name="level"]').val(obj.level);
                    $('input[name="icon"]').val(obj.icon);
                    //判断节点等级
                    if (obj.level == 1){
                        $('#pidInput').hide();
						$('input[lay-filter="level"]').prop('checked', true);
                    } else {
                        $('#pidInput').show();
                        $('#pidSelect').val(obj.pid);
                        form.render('select');
                        $('input[lay-filter="level"]').removeAttr('checked');
                    }
                    form.render('checkbox');
                    //图标显示
                    $('.dcms-input-icon i').html(obj.icon);
                    $('button[lay-filter="form"]').html('更新');
                }
			});
        }

        //监听父节点switch切换
        form.on('switch(level)', function(data){
			if(data.elem.checked){
			    $('#pidInput').hide();
			    $('input[name="pid"]').val(0);
			    $('input[name="level"]').val(1);
			} else {
                $('#pidInput').show();
                $('input[name="pid"]').val($('#pidSelect').val());
                $('input[name="level"]').val(2);
			}
        });

        //监听form提交
        form.on('submit(form)', function(data){
			var reqData = data.field;
			$.ajax({
				url: '${basePath}/power/menu/' + type,
				type: 'post',
				dataType: 'json',
				data: reqData,
				success: function (res) {
					layer.msg(res.msg, {
					    time: 800
					}, function () {
						if (res.code == 10000){
						    action.resetForm();
						    initZtree();
						}
                    });
                }
			})
        });


        //初始化父节点
		function initPid() {
            $.ajax({
                url: '${basePath}/power/menu/query',
                type: 'post',
                dataType: 'json',
				data: {
					level: 1,
					page: 1,
					limit: 999
                },
                success: function (res) {
                    $('#pidSelect').html('');
					var list = res.data;
                    for (var i = 0; i < list.length; i++) {
                        var obj = list[i];
                        var menuId = obj.menuId;
                        var menuName = obj.title;
						$('#pidSelect').append('<option value="'+ menuId +'">' + menuName + '</option>')
                    }
                    form.render('select');

                    //监听select选择
                    form.on('select(pidSelect)', function(data){
						$('input[name="pid"]').val(data.value);
                    });
                }
			});
        }
        initPid();

        //抓取layui图标
		function initIcons() {
			$.ajax({
				url: '${basePath}/power/menu/icons',
				type: 'post',
				dataType: 'json',
				success: function (res) {
					if (res.code == 10000){
					    var iconHtml = '';
                        for (var i = 0; i < res.object.length; i++) {
                            var obj = res.object[i];
                            obj = obj.replace('amp;', '');
                            var $icon = $('<i>').addClass('layui-icon').html(obj);
                            var $span = $('<span>').addClass('dcms-box').append($icon);
                            $('#iconModal .dcms-icons-container').append($span);
                        }

                        //打开modal
						var iconModalIndex = -1;
						$('.dcms-input-icon').click(function () {
                            iconModalIndex = layer.open({
								type: 1,
								content: $('#iconModal'),
								shade: false,
								area: ['500px', '92%'],
								title: '选择图标'
							})
                        });

                        //图标选中事件
                        $('.dcms-box').on('click', function () {
                            var icon = $(this).find('i').html();
                            $('.dcms-input-icon i').html(icon);
                            $('input[name="icon"]').val(icon);
                            layer.close(iconModalIndex);
                        });
                    }
                }
			})
        }
        initIcons();

        var action = {
            refresh: function(){
                initZtree();
            },
            toInsert: function(){
                type = 'insert';
                action.resetForm();
            },
			resetForm: function () {
                $('#form button[type="reset"]').trigger('click');
                $('#pidInput').hide();
                $('.dcms-input-icon i').html('&#xe617;');
                $('button[lay-filter="form"]').html('新增');
                $('input[lay-filter="level"]').prop('checked', true);
                form.render('checkbox');
                type = 'insert';
                $('input[name="level"]').val(1);
                $('input[name="pid"]').val(0);
                initPid();
            },
            delete: function(ids){
                $.ajax({
                    url: '${basePath}/power/menu/delete',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        id: checkedNode.id,
						isParent: checkedNode.isParent
                    },
                    success: function(resp){
                        if(resp.code==10000){
                            layer.msg('删除成功',{
                                time: 1000
                            }, function(){
                                initZtree();
                            })
                        }
                    }
                })
            },
            update: function(reqData){
                $.ajax({
                    url: '${basePath}/power/menu/update',
                    type: 'post',
                    dataType: 'json',
                    data:reqData,
                    success: function(resp){
                        console.log(resp)
                        if(resp.code==10000){
                            layer.msg('更新成功',{
                                time: 1000
                            });
                        }
                    }
                })
            }
        };

        $('#menu-main #toolbar .layui-btn').on('click', function(){
            var type = $(this).data('type');
            action[type] ? action[type].call(this) : '';
        });
    });


</script>
</body>
</html>